$(function() {
    var form = layui.form
        //1 调用接口，渲染表格数据
    function renderCateList() {
        //1.1 发送请求
        $.ajax({
            url: '/my/article/cates',
            method: 'GET',
            success: function(res) {
                //1.2 判断请求是否失败
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                //1.3 利用模板引擎渲染数据
                var htmlStr = template('list-tpl', res)
                console.log(htmlStr)
                    //填充到tbody
                $('tbody').html(htmlStr)
            },
        })
    }
    renderCateList()

    //2.给每个删除按钮绑定点击事件，删除数据
    // 利用事件委托,因为按钮是后来添加的
    $(document).on('click', '.del-btn', function() {
        // console.log(123)

        //2.1 获取自定义索引的值
        var id = $(this).data('id')

        //弹出询问框
        layer.confirm(
            '是否确认删除?臭宝', { icon: 3, title: '提示' },
            function(index) {
                //do something
                //2.3 调用接口，发送请求
                $.ajax({
                    url: '/my/article/deletecate/' + id,
                    method: 'GET',
                    success: function(res) {
                        //2.4 判断请求是否失败
                        if (res.status !== 0) {
                            return layer.msg(res.message)
                        }

                        //2.5 提示用户
                        layer.msg('删除成功')

                        //2.6 重新渲染数据
                        renderCateList()
                    },
                })

                layer.close(index)
            }
        )
    })

    //3.点击添加按钮，新增一条分类数据
    var index
        //3.1绑定点击事件
    $('.add-btn').click(function() {
        //3.2 弹出表单模态框
        index = layer.open({
            type: 1,
            title: '添加文章类别',
            //宽高
            area: ['500px', '250px'],
            //弹出层内容：提前定义在一个模板中
            content: $('#add-form-tpl').html(),
        })
    })

    //3.3监听表单的提交事件
    $(document).on('submit', '#form-add', function(e) {
            //阻止浏览器默认行为
            e.preventDefault()

            //3.4 调用接口
            $.ajax({
                url: '/my/article/addcates',
                method: 'POST',
                data: $(this).serialize(),
                success: function(res) {
                    //3.5 判断失败
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }

                    //3.6 提示用户
                    layer.msg('新增分类成功!')

                    //3.7 关闭弹层
                    layer.close(index)

                    //3.8 重新渲染数据
                    renderCateList()
                },
            })
        })
        // 4点击编辑按钮，修改数据
        // 4.1给编辑按钮绑定点击事件
    $(document).on('click', ".etit-btn", function() {
            console.log(121);
            index = layer.open({
                type: 1,
                title: '编辑文章类别',
                //宽高
                area: ['500px', '250px'],
                //弹出层内容：提前定义在一个模板中
                content: $('#edit-form-tpl').html(),
            })
            var id = $(this).data('id')
            $.ajax({
                url: '/my/article/cates/' + id,
                method: 'GET',
                success: function(res) {
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    form.val('form-edit', res.data)
                },

            })
        })
        // 4.2监听表单提交事件
    $(document).on('submit', "#form-edit", function(e) {
        e.preventDefault()
        $.ajax({
            url: '/my/article/updatecate',
            method: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)

                }
                layer.msg('更新分类成功')
                layer.close(index)
                renderCateList()
            }

        })
    })

})